<%
/**
 * Textarea 组件
 * @param {String} name - textarea的name属性
 * @param {String} placeholder - placeholder文本
 * @param {String} value - textarea的值，可选
 * @param {Boolean} required - 是否必填，默认false
 * @param {String} className - 额外的CSS类，可选
 * @param {String} minWidth - 最小宽度类，可选
 * @param {Number} rows - 行数，默认4
 */

const textareaId = typeof id !== 'undefined' ? id : 'textarea_' + Math.random().toString(36).substr(2, 9);
const textareaName = typeof name !== 'undefined' ? name : '';
const textareaPlaceholder = typeof placeholder !== 'undefined' ? placeholder : '';
const textareaValue = typeof value !== 'undefined' ? value : '';
const isRequired = typeof required !== 'undefined' ? required : false;
const isDisabled = typeof disabled !== 'undefined' ? disabled : false;
const extraClass = typeof className !== 'undefined' ? className : '';
const textareaMinWidth = typeof minWidth !== 'undefined' ? minWidth : '';
const textareaRows = typeof rows !== 'undefined' ? rows : 4;

const disabledClass = isDisabled ? 'bg-gray-100 text-gray-500 cursor-not-allowed' : '';
%>

<textarea id="<%= textareaId %>"
          name="<%= textareaName %>"
          <% if (isRequired) { %>required<% } %> <% if (isDisabled) { %>disabled<% } %>
          rows="<%= textareaRows %>"
          class="w-full <%= textareaMinWidth %> px-4 py-2.5 border border-gray-200 rounded-lg hover:border-blue-400 focus:border-blue-600 focus:outline-none focus:ring-0 focus:ring-blue-600 transition-colors duration-200 resize-none <%= disabledClass %> <%= extraClass %>"
          placeholder="<%= textareaPlaceholder %>"><%= textareaValue %></textarea>